<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <script src="/js/login.js"></script>
    <script src="/js/txx.js"></script>
</head>
<body>
<div id="app">
    <txx>
        <main class="c900 el-card" style="align-items: stretch; width: 600px; padding: 30px 50px">
            <h2>添加车辆</h2>
            <el-form label-width="80px" label-position="left">
                <el-form-item label-width="0px" style="margin-bottom: 0px">
                    <div class="flex" style="align-items: stretch">
                        <el-form label-width="80px" label-position="left" style="width:340px">
                            <el-form-item label="型号: ">
                                <el-input placeholder="型号" v-model="car.model"></el-input>
                            </el-form-item>
                            <el-form-item label="品牌: ">
                                <el-select style="width: 100%" placeholder="请选择品牌" v-model="car.brand">
                                    <el-option
                                            v-for="brand in brands"
                                            :key="brand"
                                            :label="brand"
                                            :value="brand">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="租价: ">
                                <el-input placeholder="租价" type="number" v-model="car.price"></el-input>
                            </el-form-item>
                            <el-form-item label="状态: ">
                                <el-radio-group v-model="car.state">
                                    <el-radio label="在库">在库</el-radio>
                                    <el-radio label="出库">出库</el-radio>
                                    <el-radio label="维修">维修</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-form>
                        <!-- 封面图上传 -->
                        <el-popover width="400" trigger="click" placement="top-end">
                            <el-image
                                    slot="reference"
                                    fit="cover"
                                    style="margin-right: 10px; width: 200px; height: 226px"
                                    :src="car.coverImage"
                                    @error="handleImageError">
                                <span slot="error" class="fbox border1">提交封面图</span>
                            </el-image>
                            <el-input placeholder="粘贴图片链接" v-model="imageUrl">
                                <el-button slot="append" @click="uploadCoverImage">上传封面图</el-button>
                            </el-input>
                        </el-popover>
                    </div>
                </el-form-item>
                <el-form-item label="轮播图: ">
                    <div id="carousel" class="flex" style="justify-content: flex-start">
                        <el-popover width="400" trigger="click" placement="top-start">
                            <el-image slot="reference" fit="cover"
                                      src="https://img1.baidu.com/it/u=2135687772,454020192&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625">
                                <span slot="error" class="fbox border1">提交图片</span>
                            </el-image>
                            <el-input placeholder="粘贴图片">
                                <el-button slot="append">上传图片</el-button>
                            </el-input>
                        </el-popover>
                        <el-popover width="400" trigger="click" placement="top-start">
                            <el-image slot="reference" fit="cover">
                                <span slot="error" class="fbox border1">提交图片</span>
                            </el-image>
                            <el-input placeholder="粘贴图片">
                                <el-button slot="append">上传图片</el-button>
                            </el-input>
                        </el-popover>
                    </div>
                </el-form-item>
                <el-form-item label="介绍: ">
                    <el-input placeholder="介绍" v-model="car.description"></el-input>
                </el-form-item>
                <el-form-item style="text-align: right; margin-right: 10px">
                    <el-button type="primary" @click="addCar">添加</el-button>
                </el-form-item>
            </el-form>
        </main>
    </txx>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            brands: [], // 品牌列表
            car: {
                model: "", // 型号
                brand: "", // 品牌
                price: "", // 租价
                state: "在库", // 状态
                description: "", // 介绍
                coverImage: "", // 封面图 URL
            },
            imageUrl: "", // 用户输入的图片链接
        },
        methods: {
            // 获取品牌数据
            getBrands() {
                axios.get("txxcar/getBrands").then(res => {
                    if (res.data.code == 1) {
                        this.brands = res.data.data; // 将品牌数据赋值给 brands
                    } else {
                        alert("查询失败");
                    }
                });
            },
            // 上传封面图
            uploadCoverImage() {
                if (!this.imageUrl) {
                    alert("请输入图片链接");
                    return;
                }
                // 将用户输入的图片链接赋值给封面图
                this.car.coverImage = this.imageUrl;
                this.imageUrl = ""; // 清空输入框
            },
            // 图片加载失败处理
            handleImageError() {
                this.car.coverImage = ""; // 清空封面图
            },
            // 添加车辆
            addCar() {
                axios.post("txxcar/addCar", this.car).then(res => {
                    if (res.data.code == 1) {
                        alert("添加成功");
                        // 清空表单
                        this.car = {
                            model: "",
                            brand: "",
                            price: "",
                            state: "在库",
                            description: "",
                            coverImage: "",
                        };
                    } else {
                        alert("添加失败");
                    }
                });
            },
        },
        mounted() {
            this.getBrands(); // 页面加载时获取品牌数据
        },
    });
</script>
</body>
</html>
<style>
    .el-form-item .el-form-item {
        margin-bottom: 22px
    }
</style>